import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Alert,
  ScrollView,
} from 'react-native';
import { uploadFileWithChunk } from '../utils/chunkUploader';

export default function UltraSimpleTest() {
  const [isUploading, setIsUploading] = useState(false);
  const [result, setResult] = useState<string>('');

  const testUpload = async () => {
    setIsUploading(true);
    setResult('');

    try {
      console.log('🧪 开始超级简单上传测试...');
      
      // 创建测试文件
      const testFile = {
        uri: 'file:///test/path/test.txt',
        name: 'test.txt',
        size: 100,
        type: 'text/plain',
      };

      console.log('📁 测试文件:', testFile);
      
      // 直接上传
      const uploadResult = await uploadFileWithChunk({
        file: testFile,
        onProgress: (percent) => console.log(`进度: ${percent}%`),
      });

      console.log('✅ 上传成功:', uploadResult);
      
      setResult(`✅ 上传成功!\n\n文件: ${uploadResult.data.fileName}\n大小: ${uploadResult.data.fileSize} bytes\nURL: ${uploadResult.data.url}`);
      
      Alert.alert('成功', '文件上传测试成功！');

    } catch (error: any) {
      console.error('❌ 上传失败:', error);
      
      const errorMsg = `❌ 上传失败:\n\n错误: ${error.message}`;
      setResult(errorMsg);
      
      Alert.alert('失败', `上传测试失败: ${error.message}`);
    } finally {
      setIsUploading(false);
    }
  };

  const clearResult = () => {
    setResult('');
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>🧪 超级简单上传测试</Text>
        <Text style={styles.subtitle}>测试文件上传功能是否正常工作</Text>
      </View>

      <TouchableOpacity
        style={[styles.testButton, isUploading && styles.testButtonDisabled]}
        onPress={testUpload}
        disabled={isUploading}
      >
        <Text style={styles.testButtonText}>
          {isUploading ? '测试中...' : '🧪 开始测试'}
        </Text>
      </TouchableOpacity>

      {result && (
        <View style={styles.resultSection}>
          <Text style={styles.resultTitle}>测试结果:</Text>
          <Text style={styles.resultText}>{result}</Text>
          
          <TouchableOpacity
            style={styles.clearButton}
            onPress={clearResult}
          >
            <Text style={styles.clearButtonText}>清除结果</Text>
          </TouchableOpacity>
        </View>
      )}

      <View style={styles.infoSection}>
        <Text style={styles.infoTitle}>💡 说明</Text>
        <Text style={styles.infoText}>
          • 这个测试会尝试上传一个模拟文件{'\n'}
          • 使用最新的智能服务器发现{'\n'}
          • 自动选择可用的服务器{'\n'}
          • 如果成功，说明上传功能完全正常{'\n'}
          • 如果失败，会显示具体错误信息
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 16,
  },
  header: {
    alignItems: 'center',
    marginBottom: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
  },
  testButton: {
    backgroundColor: '#007AFF',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 24,
  },
  testButtonDisabled: {
    backgroundColor: '#ccc',
  },
  testButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
  resultSection: {
    backgroundColor: '#fff',
    padding: 16,
    borderRadius: 8,
    marginBottom: 24,
  },
  resultTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 12,
  },
  resultText: {
    fontSize: 14,
    color: '#333',
    lineHeight: 20,
    marginBottom: 16,
    fontFamily: 'monospace',
  },
  clearButton: {
    backgroundColor: '#FF3B30',
    padding: 12,
    borderRadius: 6,
    alignItems: 'center',
  },
  clearButtonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
  infoSection: {
    backgroundColor: '#E3F2FD',
    padding: 16,
    borderRadius: 8,
  },
  infoTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1976D2',
    marginBottom: 12,
  },
  infoText: {
    fontSize: 14,
    color: '#1976D2',
    lineHeight: 20,
  },
}); 